<template>
  <div class="login-page" @keyup.13="handleSubmit">
    <el-container class="login-page__wrapper">
      <el-main>
        <video class="video" src="/static/video/login_bg.mp4" autoplay loop></video>
        <div class="login-page__icon">
          <div class="icon-left">
            <i v-for="$index in 9" :class="'icon icon-left'+$index"></i>
          </div>
          <div class="icon-right">
            <i v-for="$index in 7" :class="'icon icon-right'+$index"></i>
          </div>
        </div>
        <div class="login-page__logo"></div>
        <div class="login-page__main">
          <span class="star star1"></span>
          <span class="star star2"></span>
          <el-form ref="form" class="login-page__form" :model="loginForm" :rules="rules">
            <el-form-item prop="account">
              <el-input placeholder="请输入用户名" tabindex="1" v-model="loginForm.account">
                <template slot="prepend"><i class="iconfont icon-user"></i></template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input placeholder="请输入密码" type="password" tabindex="2" v-model="loginForm.password">
                <template slot="prepend"><i class="iconfont icon-lock"></i></template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="login-page__main_login" @click="handleSubmit">登 录</el-button>
            </el-form-item>
            <!--<el-form-item>-->
            <!--<el-button type="success">PKI证书</el-button>-->
            <!--</el-form-item>-->
          </el-form>
        </div>
      </el-main>
      <el-footer height="20">
        <div><span class="side"></span>技术支持：珠海市新德汇信息技术有限公司 <a href="#">下载谷歌浏览器</a><span class="side"></span></div>
      </el-footer>
      <!--<div class="login-page__line"></div>-->
    </el-container>
  </div>
</template>

<style type="text/scss" lang="scss">
  @import "../style/vars";

  //width,height,left,top
  $icons: (
    left: (
      1:(24, 20, 95, 308),
      2:(24, 20, 148, 208),
      3:(42, 36, 224, 270),
      4:(44, 38, 265, 140),
      5:(35, 30, 408, 270),
      6:(35, 30, 520, 160),
      7:(31, 27, 390, 0),
      8:(26, 23, 590, 230),
      9:(31, 27, 516, 392)
    ),
    right:(
      1:(35, 30, 44, 265),
      2:(35, 30, 315, 115),
      3:(53, 47, 247, 302),
      4:(39, 34, 388, 233),
      5:(20, 17, 533, 357),
      6:(31, 27, 117, 432),
      7:(39, 34, 480, 442)
    )
  );

  @mixin setIcon($type,$index,$width,$height,$left,$top) {
    width: 1px * $width;
    height: 1px * $height;
    left: 1px * $left;
    top: 1px * $top;
    background: url("../assets/images/login_icon/icon_#{$type}_#{$index}.png") no-repeat;
  }

  .video {
    position: absolute;
    width: 1920px;
    height: 1080px;
    top: 0;
    left: 50%;
    z-index: 0;
    opacity: 0.5;
    transform: translateX(-50%);
  }

  .login-page {
    width: 100%;
    height: 100%;
    background: url('../assets/images/login_line.jpg') #020d45 center center;
    min-height: 600px;
    position: relative;
    overflow: hidden;

    &__wrapper {
      width: 100%;
      height: 100%;
      background: url('../assets/images/login_bg.jpg') no-repeat top center;
      position: absolute;
      text-align: center;
      padding: 0;
    }
    &__icon {
      position: absolute;
      width: 100%;
      height: 480px;
      left: 0;
      top: 220px;
      z-index: 0;
      .icon-left, .icon-right {
        width: 625px;
        height: 100%;
        position: absolute;
      }
      .icon-left {
        right: calc(100vw * 0.5 + 340px)
      }
      .icon-right {
        left: calc(100vw * 0.5 + 340px)
      }
      .icon {
        display: inline-block;
        position: absolute;
        opacity: 0.5;
      }
      @each $key, $value in $icons {
        @each $k, $item in $value {
          .icon-#{$key}#{$k} {
            @include setIcon($key, $k, $item...);
            animation: iconMove ceil(random()*2)*5s 0s ease-in-out infinite;
          }
        }
      }
    }
    &__logo {
      width: 583px;
      height: calc(100vh * 0.25);
      min-height: 190px;
      background: url('../assets/images/login_logo.png') no-repeat center center;
      margin: auto;
      position: relative;
    }
    &__name {
      font-size: 34px;
      color: #fff;
      font-family: "Microsoft YaHei", Arial, sans-serif;
      text-shadow: 3px 3px 3px #333;
      margin-bottom: 30px;
      font-weight: bold;
      letter-spacing: 5px;
    }
    &__main {
      width: 668px;
      height: 474px;
      margin: auto;
      background: url('../assets/images/login_content.png') no-repeat center center;
      position: relative;
      &_login {
        width: 381px;
        height: 48px;
        border: 0;
        border-radius: 0;
        color: #fff;
        font-size: 20px;
        background: url('../assets/images/login_btn__login.jpg') no-repeat center center;
        &:hover {
          color: #fff;
        }
      }
      .star {
        display: inline-block;
        width: 5px;
        height: 5px;
        background: #fff;
        opacity: .7;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
        border-radius: 50%;
        box-shadow: 0 0 30px #fff;
        animation: run 10s linear infinite;

        &.star2 {
          animation-delay: -5s;
        }
      }
    }
    &__info {
      text-align: left;
      margin-top: 10px;
    }
    .el-form-item__content {
      width: 380px;
      margin: 0 auto;
    }
    .el-input {
      border: 1px solid #177ebe;
      background: #072b51;
      &__inner {
        height: 45px;
        padding-left: 0;
        border: 0;
        background: transparent;
        font-size: 16px;
      }
      &-group__prepend {
        background: transparent;
        padding: 0 10px;
        color: #105397;
        border: none;
        .iconfont {
          font-size: 22px;
          font-weight: bold;
        }
      }
    }
    .el-form {
      padding-top: 135px;
      text-align: center;
      border-radius: 6px;
      position: relative;
      z-index: 3;
      &-item {
        margin-bottom: 25px;
        &:last-child {
          margin-right: 0;
        }
      }
    }

    .el-main {
      padding: 0;
    }
    .el-footer {
      height: calc(100vh * 0.01);
      min-height: 30px;
      color: #ccc;
      font-size: 14px;
      position: relative;
      .side {
        display: inline-block;
        width: 175px;
        height: 16px;
        margin: 0 10px;
        background: url('../assets/images/login_footer_bg.png') no-repeat center center;
      }
      a {
        color: #ccc;
      }
    }
  }

  @keyframes run {
    0% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(668px);
    }
    50% {
      transform: translate(668px, 473px);
    }
    75% {
      transform: translate(0px, 473px);
    }
    100% {
      transform: translateY(0px);
    }
  }

  @keyframes iconMove {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  }
</style>

<script>
  import {loginAction, getCurrentUser} from '../helper/before'
  import {LOCAL, save} from '../utils/storage'

  export default {
    data() {
      return {
        rules: {
          account: [
            {required: true, message: '请输入账号', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'change'}
          ]
        },
        loginForm: {
          account: '',
          password: ''
        }
      }
    },
    methods: {
      handleSubmit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            loginAction({
              username: this.loginForm.account,
              password: this.loginForm.password
            }).then(res => {
              // 登录成功的处理
              save('token', res, LOCAL)
              // 获取用户成功后再跳转
              getCurrentUser().then(r => {
                this.$router.push('/')
              })
            }).catch(err => {
              this.$message({
                type: 'error',
                message: err.msg || '登录失败！'
              })
            })
          }
        })
      }
    }
  }
</script>
